<template>
  <view class="container">

    <view class="boxPanel" v-for="(packageItem, packageIndex) in packageList" :key="packageIndex">
		<view class="flex-y-center">
        <image :src="$util.img(packageItem.express_company_image)" mode="" class="deliverIcon"></image>
        <text class="c-87 m-r-6">{{ packageItem.express_company_name }}</text>
        <text class="c-87">{{ packageItem.delivery_no }}</text>
        <text class="m-l-auto c-87" @click="copyText(packageItem.delivery_no)">复制</text>
      </view>
	</view>

    <view class="boxPanel"  v-for="(packageItem, packageIndex) in packageList" :key="packageIndex" v-if="packageItem.trace.success && packageItem.trace.list.length != 0">
      <view class="track-wrap" >
      <block >
        <view
          class="track-item"
          v-for="(traceItem, traceIndex) in packageItem.trace.list"
          :class="traceIndex == 0 ? 'active' : ''"
          :key="traceIndex"
        >
          <view class="dot" :class="traceIndex == 0 ? 'baseBg' : ''"></view>
          <view class="msg">
            <!-- <view class="text1" :class="traceIndex == 0 ? 'color-base-text' : 'color-base-text1'">{{traceItem.status}}</view> -->
            <view class="text" :class="traceIndex == 0 ? 'color-base-text' : ''">{{ traceItem.remark }}</view>
            <view class="time font-weight-6">{{ traceItem.datetime }}</view>
          </view>
        </view>
      </block>
     </view>
    </view>
    
  </view>
</template>

<script>
  export default {
    data() {
      return {
        order_id: '',
        packageList: [],
       

      }
    },
    onLoad(option) {
      this.order_id = option.order_id;
      this.getlogistics()
    },
    methods: {
      //复制单号
      copyText(express_no) {
        this.$util.copy(express_no)
      },
      getlogistics() {
        this.$api.sendRequest({
          url: '/api/order/package',
          data: {
            order_id: this.order_id
          },
          success: res => {
            if(res.code == 0) {
				this.packageList = res.data;
				this.packageList.forEach(item => {
					if (item.trace.list) {
						item.trace.list = item.trace.list.reverse();
					}
					item.status = this.status++;
				});
            }else {
              this.$util.showToast({title: res.message});
            }
          }
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
.boxPanel {
  margin: 24rpx 24rpx 0;
  padding: 20rpx 30rpx;
  .map {
    width: 46rpx;
    height: 46rpx;
    margin-right: 10rpx;
  }
  .deliverIcon {
    width: 44rpx;
    height: 44rpx;
    margin-right: 20rpx;
  }
  .border {
    padding-bottom: 20rpx;
    border-bottom: 1px solid #EBEBEB;
    margin-bottom: 20rpx;
  }
}

.track-wrap {
    margin-top: 40rpx;
  	background: #fff;
    position: relative;
    box-sizing: border-box;
  
  	.track-item {
  		position: relative;
  		flex-wrap: wrap;
  		overflow: visible;
  		display: flex;
  		&:after {
  			content: '';
  			position: absolute;
  			z-index: 1;
  			pointer-events: none;
  			background-color: #e5e5e5;
  			width: 1px;
  			height: 150%;
  			bottom: 0;
  			left: 0;
  			top: 56rpx;
  			left: 25rpx;
  			bottom: -40rpx;
  		}
  
  		.dot {
  			margin: 34rpx 20rpx 0 10rpx;
  			width: 32rpx;
  			height: 32rpx;
  			border-radius: 50%;
  			background-color: #DADADA;
  			z-index: 9;
  		}
  
  		.msg {
  			padding: 20rpx 0;
  			flex: 1;
        
        .text1 {
          font-size: 32rpx;
          font-weight: bold;
        }
  
  			.text {
  				line-height: 1.5;
  				font-size: 28rpx;
          color: #999999;
  			}
  
  			.time {
  				color: #999999;
  				font-size: 20rpx;
          color: #999999;
  				line-height: 1.3;
  				margin-top: 10rpx;
  			}
  		}
  
  		&:last-of-type:after {
  			content: unset;
  		}
  	}
  }
  
  .color-base-text {
    color: #333333!important;
  }
  .color-base-text1 {
    color: #999999!important;
  }

  .baseBg {
    background-color: $color-title2!important;
  }
</style>
